<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05员工表格练习</title>
</head>
<body>
    <input type="text" placeholder="输入员工姓名" id="i1">
    <input type="text" placeholder="输入员工工资" id="i2">
    <input type="text" placeholder="输入员工岗位" id="i3">
    <button onclick="add()">添加员工</button>
    <hr>
<table border="1px">
    <caption>员工信息表</caption>
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>岗位</th>
    </tr>
</table>
    <script>
        //8.1 准备一个空数组,存储员工信息
        let arr = [];

        function add() {
            //1. 创建一个对象,存储员工信息
            let obj ={
                name:document.getElementById('i1').value,
                salary:document.getElementById('i2').value,
                job:document.getElementById('i3').value
            }
            //2.
            if (!obj.name || !obj.salary || !obj.job){
                alert('请输入员工信息');
                return;
            }
            // 3.创建tr
            let tr = document.createElement('tr');
            let td1 = document.createElement('td');
            let td2 = document.createElement('td');
            let td3 = document.createElement('td');
            // 4.将td的内容设置为obj对象的属性值
            td1.innerHTML = obj.name;
            td2.innerHTML = obj.salary;
            td3.innerHTML = obj.job;
            // 5.将td添加到tr中
            tr.append(td1,td2,td3);
            // tr.appendChild(td1);
            // tr.appendChild(td2);
            // tr.appendChild(td3);

            // 6.获取表格元素并添加新行
            let table = document.querySelector('table');
            table.append(tr);

            // 7.清空输入框
            document.getElementById('i1').value = '';
            document.getElementById('i2').value = '';
            document.getElementById('i3').value = '';
            // 8.2将本次收集到的员工数据添加到数组中(后期可以给后端发请求)
            arr.push(obj);
            console.log(arr);

        }
    </script>

</body>
</html>